<template>
  <div class="content">
    <div class="sztxDiv">
      <TitleVue :name="'四制体系'" />
      <div class="sztxContent">
        <div class="itemDiv" v-for="(item, index) in sztxList" :key="index" @mouseover="activeIndex = index" @mouseout="activeIndex = null">
          <!-- <img src="@/assets/img/common/headerPictue.png" alt="" /> -->
          <img :src="getImg(index)" alt="" />

          <div>
            <p :title="item.role + '-' + item.name">{{ item.role }}-{{ item.name }}</p>
            <p>{{ item.phone }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="jypxDiv">
      <TitleVue :name="'教育培训'" />
      <div id="jypxChart" ref="jypxChart"></div>
    </div>

    <div class="zrzjDiv">
      <TitleVue :name="'责任追究'" />
      <div class="zrzjContent">
        <div class="itemDiv">
          <img src="@/assets/img/common/a.png" alt="" />
          <div class="titleDiv">
            <p>漫坝次数</p>
            <p>{{ mbcs }}</p>
          </div>
        </div>

        <div class="itemDiv">
          <img src="@/assets/img/common/b.png" alt="" />
          <div class="titleDiv">
            <p style="color: #9ce331">垮坝次数</p>
            <p>{{ kbcs }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="wbjlDiv">
      <TitleVue :name="'维保记录统计'" />
      <div id="wbjlChart" ref="wbjlChart"></div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'
export default {
  name: 'ZrzLeft',
  components: {
    TitleVue
  },
  data() {
    return {
      activeIndex: null,
      sztxList: [
        {
          role: '政府责任人',
          name: '李志刚',
          phone: '13111111111'
        },
        {
          role: '主管部门责任人',
          name: '岳俊文',
          phone: '13111111111'
        },
        {
          role: '管理单位责任人',
          name: '周金锁',
          phone: '13111111111'
        },
        {
          role: '技术责任人',
          name: '郭海卿',
          phone: '13111111111'
        },
        {
          role: '巡查责任人',
          name: '王瑞峰',
          phone: '13111111111'
        }
      ],
      myChart: null,
      mbcs: 0,
      kbcs: 0,
      myChart2: null
    }
  },
  mounted() {
    this.renderJypxChart()
    this.renderWbjlChart()
  },
  methods: {
    getImg(index) {
      var img = this.activeIndex == index ? 'headerPictue2' : 'headerPictue'
      return require('@/assets/img/common/' + img + '.png')
    },
    renderJypxChart() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = echarts.init(this.$refs.jypxChart)
      const option = {
        grid: {
          top: '18%',
          left: '10%',
          right: '5%',
          bottom: '15%'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['计划', '实际'],
          right: 'auto',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            // prettier-ignore
            data: ['1季度', '2季度', '3季度', '4季度'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff' //设置 字体颜色
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#0095FF'
              }
            },
            axisTick: {
              show: true
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#8FADCC' //设置 字体颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#8FADCC' // 设置轴线颜色为红色
              }
            }
          }
        ],
        series: [
          {
            name: '计划',
            type: 'bar',
            barWidth: 15,
            data: [12, 18, 8, 16],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ccc' },
                { offset: 0.5, color: '#ccc' },
                { offset: 1, color: '#fff' }
              ])
            }
          },
          {
            name: '实际',
            type: 'bar',
            barWidth: 15,
            data: [10, 16, 9, 16],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#00FFEA' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#0066FF' }
              ])
            }
          }
        ]
      }
      this.myChart.setOption(option)
      // window.onresize = function () {
      //   this.myChart.resize()
      // }
    },
    renderWbjlChart() {
      if (this.myChart2) {
        this.myChart2.dispose()
      }
      this.myChart2 = echarts.init(this.$refs.wbjlChart)
      const option = {
        grid: {
          top: '6%',
          left: '10%',
          right: '5%',
          bottom: '35%'
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return params[0].name + '：' + params[0].value + '次'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff' //设置 字体颜色
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#0095FF'
            }
          },
          axisTick: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#8FADCC' //设置 字体颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#8FADCC'
            }
          }
        },
        series: [
          {
            data: [3, 5, 2, 1, 4, 1],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: '#00E8FF'
            }
          }
        ]
      }
      this.myChart2.setOption(option)
      // window.onresize = function () {
      //   this.myChart2.resize()
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .sztxDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .sztxContent {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      padding: 0 0.5vw;
      box-sizing: border-box;
      flex-wrap: wrap;
      .itemDiv {
        width: 48%;
        display: flex;
        color: #e9e5ff;
        margin-bottom: 1vh;
        overflow-x: hidden;
        img {
          height: 6vh;
        }
        div {
          flex: 1;
          margin-left: 5px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          display: flex;
          flex-direction: column;
          justify-content: center;
          overflow-x: hidden;
          p:nth-child(1) {
            width: 100%;
            cursor: pointer;
            font-size: 1.5vh;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
          }
          p:nth-child(2) {
            font-size: 1.7vh;
            padding: 5px;
            box-sizing: border-box;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }
  }
  .jypxDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    #jypxChart {
      height: 15vh;
      padding: 0 0.8vw 0.8vh;
      box-sizing: border-box;
    }
  }
  .zrzjDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    .zrzjContent {
      padding: 0 1vw;
      box-sizing: border-box;
      display: flex;
      justify-content: space-around;
      .itemDiv:nth-child(2) {
        .titleDiv {
          p:nth-child(2) {
            color: #edfbff;
            background: -webkit-linear-gradient(top, #9ce331 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
        }
      }
      .itemDiv {
        position: relative;
        img {
          height: 10vh;
        }
        .titleDiv {
          position: absolute;
          width: 100%;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          p:nth-child(1) {
            width: 100%;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 1.9vh;
            color: #44c1ef;
          }
          p:nth-child(2) {
            font-weight: bold;
            font-size: 3vh;
            color: #edfbff;
            background: -webkit-linear-gradient(top, #28d9ff 0%, #ffffff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
          }
        }
      }
    }
  }
  .wbjlDiv {
    flex: 1;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    #wbjlChart {
      width: 100%;
      height: 100%;
      padding: 0 0.8vw;
      box-sizing: border-box;
    }
  }
}
</style>
